<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关注</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/yitiao-icon.png">
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/footer-bar.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h5 {
            font-weight: bold;
            font-size: 8px;
        }
        .row {
            width: 100%;
        }
        .jocelyn-class {
            margin: auto;
        }
        .title {
            position: fixed;
            top: 0;
            z-index: 9;
            width: 100vw;
            background-color: white;
        }
        .col-xs-12 {
            width: 100%;
        }

        .container {
            margin-top: 45px;
        }

        h3 {
            margin-top: 10px;
            margin-left: 20px;
        }

        .text-font {
            font-size: 3px;
        }

        .head-portrait {
            height: 26px;
            width: 26px;
            border-radius: 13px;
        }

        .external-border {
            padding: 5px;
            margin: 0px;
        }

        .nick-name {
            font-size: 0.1em;
            text-align: center;
            line-height: 24px;
        }

        .thumb-up {
            padding: 10px 0 0;
            margin: 0;
        }

        .col-xs-4 {
            padding: 0;
            text-align: center;
        }

        .col-xs-1 {
            padding: 0;
        }
        span{
            padding:1px;
        }
    </style>
</head>
<body>
<section>
    <div class="row title">
        <h3 class="col-xs-12">
            <small>关注</small>
        </h3>
    </div>
</section>
<section class=" jocelyn-class container">
    <div class="jocelyn-class row">
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/redCake.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>我在巴黎的几天~</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp&nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-bigHeadGirl.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Ada</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart number-font" aria-hidden="true">193</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment number-font" aria-hidden="true">12</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/travelBuilding.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>看看外面的世界</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-catGirl.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">VV</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">131</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">65</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/afternoonTea.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>下午茶推荐</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-daisy.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Zoe</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">863</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">133</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/keYanView.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>柯岩是个好地方哦</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-sunset.jpg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Amy</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">109</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">15</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/iceCream.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>这是一条会长胖的动态</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-geraniumGirl.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Lyn</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">244</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">97</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4 external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/moonCake.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>巴黎甜点师做的月饼</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-girlInRedDress.jpg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Why</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">975</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">132</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail ">
                <img src="../img/follow/parisBread.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>真是神仙面包店啊！</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-GirlInWhiteShirt.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Una</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">130</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">24</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/meat.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="jocelyn-class title-font">
                        <strong>我的成都探店纪实</strong>
                    </p>
                    <p class="text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-hatGirl.png" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Anna</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">102</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">23</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/smallRedCake.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="title-font">
                        <strong>看这诱人犯罪的颜色</strong>
                    </p>
                    <p class="jocelyn-class text-font">
                        &nbsp&nbsp文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-lotus.jpg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Sue</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">234</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">86</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail">
                <img src="../img/follow/iceCreamBread.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="title-font">
                        <strong>甜点真的是阻止我减肥</strong>
                    </p>
                    <p class="jocelyn-class text-font">
                        文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-sakura.jpg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Joy</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">101</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">50</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
            <div class="jocelyn-class thumbnail ">
                <img src="../img/follow/flowerCake.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                <div class="jocelyn-class caption">
                    <p class="title-font">
                        <strong>这蛋糕我舍不得吃下去</strong>
                    </p>
                    <p class="jocelyn-class text-font">
                        文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-maskGirl.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Ewa</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">1.1w</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">243</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jocelyn-class col-xs-6 col-md-4 external-border">
            <div class="thumbnail">
                <img src="../img/follow/bowKnot.jpeg" alt="封面图片" class="img-rounded">
                <div class="caption">
                    <p class="title-font">
                        <strong>瞧这美腻的小东西</strong>
                    </p>
                    <p class="text-font">
                        文章内容开头……
                    </p>
                    <div class="row thumb-up">
                        <div class="col-xs-1">
                            <img src="../img/follow/hp-sakuraGirl.jpeg" class="head-portrait" alt=""/>
                        </div>
                        <div class="col-xs-3">
                            <p class="nick-name">Mia</p>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-heart" aria-hidden="true">254</span>
                            </small>
                        </div>
                        <div class="col-xs-4">
                            <small>
                                <span class="glyphicon glyphicon-comment" aria-hidden="true">354</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div id="footer-bar">
        <div class="item find">
            <a href="../index.html" style="text-decoration: none">
                <span class="footer-title">发现</span>
            </a>
        </div>
        <div class="item follow active">
            <a href="./follow.html" style="text-decoration: none">
                <span class="footer-title">关注</span>
            </a>
        </div>
        <div class="item release">
            <a href="release.html" style="text-decoration: none">
                <img src="../img/find/plus.png" alt="plus" class="plus">
            </a>
        </div>
        <div class="item information">
            <a href="information.html" style="text-decoration: none">
                <span class="footer-title">消息</span>
            </a>
        </div>
        <div class="item home">
            <a href="home.html" style="text-decoration: none">
                <span class="footer-title">我的</span>
            </a>
        </div>
    </div>
</footer>
</body>
<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/footer-bar.js"></script>
<script>
    $('.jocelyn-class').last().css('margin-bottom', '50px');
</script>
</html>